<style scoped>
.header {
    text-align: center;
}

.box {
    padding: 30px;
    background-color: #fff;
}

.canter {
    text-align: center;
}
</style>
<template>
    <el-card>
        <div class="box">
            <div class="header">
                <el-radio-group v-model="tabPosition" @change='changeList(tabPosition)' style="margin-bottom: 30px;">
                    <el-radio-button label="browse">浏览排行Top100</el-radio-button>
                    <el-radio-button label="share">分享排行Top100</el-radio-button>
                    <el-radio-button label="favorate">收藏排行Top100</el-radio-button>
                    <el-radio-button label="expert">关联用户数Top100</el-radio-button>
                    <el-radio-button label="product">关联产品数Top100</el-radio-button>
                </el-radio-group>
            </div>
            <div class="canter">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="code" label='应用编号' width="100"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="catNames" label="频道类别"></el-table-column>
                    <el-table-column prop="auditTime" label="发布时间" width="200"></el-table-column>
                    <el-table-column prop="num" label="数量" width="100"></el-table-column>
                </el-table>
                <!-- <el-pagination
                    layout="prev, pager, next"
                    :page-size="20"
                    background
                    :total="100" class="pt20">
                </el-pagination> -->
            </div>
        </div>
    </el-card>
</template>
<script>
import {
    RadioGroup,
    RadioButton,
    Table,
    TableColumn,
    Pagination
} from "element-ui";
export default {
    data() {
        return {
            tabPosition: "browse",
            tableData: []
        };
    },
    components: {
        ElRadioGroup: RadioGroup,
        ElRadioButton: RadioButton,
        ElTable: Table,
        // ElTableColumn:TableColumn,
        ElPagination: Pagination
    },
    created() {
        this.getList();
    },
    methods: {
        handleSizeChange() {},
        handleCurrentChange() {},
        getList() {
            var url = "/application/statistics/top100/browse";
            API.get(url, {}).then(res => {
                this.tableData = res;
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].auditTime) {
                        this.tableData[i].auditTime = new Date(
                            this.tableData[i].auditTime
                        ).toLocaleString();
                    } else {
                        this.tableData[i].auditTime = "";
                    }
                    if (this.tableData[i].cats) {
                        let str = "";
                        for (
                            let t = 0;
                            t < this.tableData[i].cats.length;
                            t++
                        ) {
                            str += this.tableData[i].cats[t].catName + "/";
                        }
                        this.tableData[i].catNames = str.slice(0, -1);
                    } else {
                        this.tableData.cats = [];
                    }
                }
            });
        },
        changeList(item) {
            var url = "/application/statistics/top100/" + item;
            API.get(url, {}).then(res => {
                this.tableData = res;
                for (let i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].auditTime) {
                        this.tableData[i].auditTime = new Date(
                            this.tableData[i].auditTime
                        ).toLocaleString();
                    } else {
                        this.tableData[i].auditTime = "";
                    }
                    if (this.tableData[i].cats) {
                        let str = "";
                        for (
                            let t = 0;
                            t < this.tableData[i].cats.length;
                            t++
                        ) {
                            str += this.tableData[i].cats[t].catName + "/";
                        }
                        this.tableData[i].catNames = str.slice(0, -1);
                    } else {
                        this.tableData.cats = [];
                    }
                }
            });
        }
    }
};
</script>
